﻿@{
    ViewBag.Title = "TagThis.Org";
}
<section class="content" data-bind="css: { search: sVM.isSearching() }">
    <div data-bind="css: { 'search-form' : sVM.isSearching } ">
        <div class="wrap">
            <h1 class="welcome" data-bind="visible: sVM.isSearching() == false">Твоё <span class="fav"><i class="icon icon-star-large"></i>избранное</span> с лучшим поиском.
            <br>
                Везде, где есть интернет.</h1>
            @if (User.Identity.IsAuthenticated)
            { 
                <form action="#" id="tagSearch" class="tag-search">
                    <ul class="control" data-bind="foreach: sVM.AllSearchTypes">
                        <li data-bind="css: { active: $data == $root.sVM.SelectedSearchType() }, click: $root.sVM.SelectType">
                            <i data-bind="css: { icon: true, 'icon-menu': $data.type == 'general', 'icon-star': $data.type == 'own' }"></i><span data-bind="    text: $data.title"></span>
                        </li>
                        <!--<li><i class="icon icon-menu"></i>база TagThis</li>-->
                    </ul>
                    <div class="form">
                        <i class="icon icon-tag-large"></i>
                        <ul id="tags"></ul>
                        <i class="icon icon-search" data-bind="click: sVM.Search"></i>
                    </div>
                </form>
            }
            else
            {
                <form action="#" id="tagSearch" class="tag-search">
                    <div class="form">
                        <i class="icon icon-tag-large"></i>
                        <ul id="tags"></ul>
                        <i class="icon icon-search" data-bind="click: sVM.Search"></i>
                    </div>
                </form>
            }
        </div>

    </div>

    <div class="search-result wrap" data-bind="visible: sVM.isSearching(), foreach: sVM.SearchResults ">
        <div class="search-result-item">
                    <div class="add"><i class="icon icon-add"></i></div>
                    <img class="screen" alt="" data-bind="visible: $data.ImageUrl().length > 0,  attr: { src: $data.ImageUrl() }">
                    <div class="text">
                        <div class="title">
                            <a data-bind="text: $data.GeneralTitle(), attr: { href: $data.Url() }"></a>
                        </div>
                        <div class="link" data-bind="text: $data.Url, style: { backgroundImage: $data.Favicon().length > 0 ? 'url('+ $data.Favicon() + ')' : 'url(/img/nofavicon.png)' }"></div>
                        <div class="desc" data-bind="text: $data.Description()" ></div>
                        <ul class="tags-list" data-bind="foreach: Tags">
                            <li class="tag tag-small tag-item" data-bind="text: $data.Text"></li>
                        </ul>
                    </div>
                </div>
    </div>

    <div class="promo">
        <div class="line"></div>
        <div class="wrap" data-bind="visible: sVM.isSearching() == false">
            @if (!User.Identity.IsAuthenticated)
            {

                <div class="promo-block promo-block-1">
                    <div class="promo-block-logo"></div>
                    <h3>Нашли интересный сайт?</h3>
                    <p><a href="#" class="underlined">Добавьте ему тег</a>, чтобы потом с лёгкостью найти его вновь.</p>
                </div>


                <div class="promo-block promo-block-2">
                    <div class="promo-block-logo"></div>
                    <h3><a href="#" class="underlined">Зарегистрируйтесь</a></h3>
                    <p>И сформируйте личную коллекцию избранных сайтов.</p>
                </div>


                <div class="promo-block promo-block-3">
                    <div class="promo-block-logo"></div>
                    <p>Сохраняйте доступ к своей коллекции с любого компьютера, смартфона или планшета!</p>
                </div>
            }
        </div>
    </div>
</section>
